<template>
  <div v-loading="isLoading">
    <div class="searchBar">
      <el-form :inline="true">
        <el-form-item>
          <el-select
            v-model="searchForm.categoryIds"
            multiple
            filterable
            placeholder="分类"
            size="mini"
          >
            <el-option
              v-for="item in categorys"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
              <el-select
                v-model="searchForm.statusList"
                placeholder="状态"
                filterable
                multiple
                size="mini"
                style="width:100px"
              >
                <el-option
                  v-for="item in statusOption"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
        <el-form-item>
          <el-input
            placeholder="请输入关键字"
            v-model="searchForm.keyword"
            size="mini"
          />
        </el-form-item>

        <el-form-item>
          <el-button size="mini" type="primary" @click="listData()"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- <el-button
      style="margin-top: 1em"
      type="text"
      class="right-button"
      @click="showAdd()"
      >添加数据</el-button
    > -->
    <el-table
      :data="pageData.record"
      stripe
      style="width: 100%"
      border
      :default-sort="{ prop: 'id', order: 'ascending' }"
      @row-click="showDesc"
    >
      <el-table-column prop="id" sortable label="id" width="80" />
      <el-table-column prop="categoryName" label="分类" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.category.name }}
        </template>
      </el-table-column>

      <el-table-column prop="title" label="标题" />
      <el-table-column prop="content" label="内容" show-overflow-tooltip />

      <el-table-column label="图片数量" width="100">
        <template slot-scope="scope">
          {{
            scope.row.fileUrls == null
              ? 0
              : scope.row.fileUrls.split(",").length
          }}
        </template>
      </el-table-column>
      <el-table-column prop="createUserNickname" label="创建人" width="100" />
      <el-table-column
        prop="createTime"
        width="180"
        sortable
        label="创建时间"
      />
      <el-table-column label="是否置顶" width="100">
        <template slot-scope="scope">
          {{ toppingOption.find(item => item.value == scope.row.topping).label }}
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100">
        <template slot-scope="scope">
          {{ statusOption.find(item => item.value == scope.row.status).label }}

        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="showDesc(scope.row)" type="text" size="small">
            查看
          </el-button>

          <el-button
            type="text"
            style="color: #f56c6c"
            size="small"
            @click.stop="del(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :page-sizes="[10, 15, 20]"
        :page-size="pageData.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
      >
      </el-pagination>
    </div>

    <el-dialog
      title="查看帖子"
      :visible.sync="isShowDesc"
      v-loading="isUpdateLoading"
    >
      <div style="width: 80%; margin: auto">
        <el-row>
          <el-col :span="4"> 标题: </el-col>
          <el-col :span="20">
            {{ showArticle.title }}
          </el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="4"> 内容: </el-col>
          <el-col :span="20">
            {{ showArticle.content }}
          </el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="4"> 图片: </el-col>
          <el-col :span="20">
            <el-row>
              <el-col
                :span="6"
                v-for="item in showArticle.fileList"
                :key="item"
              >
                <el-image
                  style="width: 100%"
                  :src="item"
                  :preview-src-list="showArticle.fileList"
                >
                </el-image>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="4">发布人：</el-col>
          <el-col :span="20">
            <el-button type="text" style="padding: 0">{{
              showArticle.createUserNickname
            }}</el-button>
          </el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-form label-width="70px" label-position="left">
            <el-form-item style="padding: 0" label="置顶：">
              <el-switch
                v-model="showArticle.topping"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
                active-text="是"
                inactive-text="否"
              >
              </el-switch>
            </el-form-item>
            <el-form-item label="状态:">
              <el-select
                v-model="showArticle.status"
                placeholder="状态"
                size="mini"
                style="width:100px"
              >
                <el-option
                  v-for="item in statusOption"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-row>
        <el-button type="primary" @click="updateArticle()">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { Message } from "element-ui";
export default {
  name: "articlePage",

  data() {
    return {
      isLoading: false,
      isShowDesc: false,
      isUpdateLoading: false,
      searchForm: {
        keyword: "",
        categoryIds: [],
        statusList:[],
        current: 1,
        size: 10
      },
      pageData: [],
      categorys: [],
      showArticle: {},
      toppingOption: [
        {
          label: "是",
          value: 1,
        },
        {
          label: "否",
          value: 0,
        },
      ],
      statusOption: [
        {
          label: "待审核",
          value: 0,
        },
        {
          label: "启用",
          value: 1,
        },
        {
          label: "禁用",
          value: 2,
        },
      ],
    };
  },
  methods: {
    listData() {
      this.isLoading = true;
      this.postRequest("/article/list", this.searchForm).then((res) => {
        if (res.data.status == 200) {
          this.pageData = res.data.data;
        }
        this.isLoading = false;
      });
    },
    listCategory() {
      this.postRequest("/category/list", this.searchForm).then((res) => {
        this.categorys = res.data.data.record;
      });
    },
    showDesc(row) {
      this.isShowDesc = true;
      this.showArticle = row;
    },
    updateArticle() {
      this.isUpdateLoading = true;
      let updateForm = {
        id: this.showArticle.id,
        status: this.showArticle.status,
        topping: this.showArticle.topping,
      };
      this.postRequest("/admin/article/updateStatus", updateForm).then(
        (res) => {
          if (res.data.status == 200) {
            this.isShowDesc = false;
            Message({
              message: "修改成功",
              type: "success",
            });
          }
          this.isUpdateLoading = false;
          this.listData();
        }
      );
    },
    del(id) {
        this.deleteRequest(`/admin/article/delete/${id}`).then((res) => {
        if (res.data.status == 200) {
          Message({
            message: "删除成功",
            type: "success",
          });
        }
        this.listData();
      });
    },
    currentChange(current){
      this.searchForm.current = current
      this.listData()
    },
    sizeChange(size){
      this.searchForm.size = size
      this.listData()
    },
  },
  created() {
    this.listCategory();
    this.listData();
  },
};
</script>
<style>
.searchBar {
  width: 60%;
  float: left;
  margin: 1em 0 0.1em 1em;
}
</style>
